<template>
  <!--菜品评论列表-->
  <!--顶部-->
  <div >
    <div class="wrapper">
      <div class="position">
        <span class="iconfont position-back" @click="onClickLeft"
          >&#xeb15;</span
        >
        <span class="inconfont position-font">评论</span>
      </div>
    </div>
    <div class="body">
    <template v-for="ranting in data.ratingList" :key="ranting.ratingId">
      <van-row style="margin: 20px">
        <van-col span="5" style="color: blueviolet"
          >昵称：{{ ranting.userName }}:
        </van-col>
        <van-col span="19">
          <div style="margin-bottom: 15px">{{ ranting.ratingCom }}</div>
          <div>
            <van-image
              :key="index"
              width="100"
              height="100"
              v-for="(img, index) in ranting.ratingIcon"
              :src="img"
              style="margin: 5px"
              @click="preview(index, ranting.ratingIcon)"
            >
            </van-image>
          </div>
        </van-col>
      </van-row>
    </template>
  </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import http from "@/utils/request.js";
import { useRoute } from "vue-router";
import { ImagePreview } from "vant";

const { query, params } = useRoute();
const data = reactive({
  ratingList: [],
});
const goodId = ref("");

onMounted(() => {
  goodId.value = params.goodId;

  http.get("/rating/" + goodId.value).then((res) => {
    if (res.data.code == 200) {
      data.ratingList = res.data.data;
      for (let i = 0; i < data.ratingList.length; i++) {
        data.ratingList[i].ratingIcon = JSON.parse(
          data.ratingList[i].ratingIcon
        );
      }
      console.log(data.ratingList);
    }
  });
});

function preview(index, images) {
  ImagePreview({
    images,
    startPosition: index,
  });
}
const onClickLeft = () => history.back();
</script>

<style scoped lang="scss">
@import "../style/mixins.scss";
@import "../style/viriables.scss";

/*顶部导航栏 */
.wrapper {
  position: absolute;
  left: 0%;
  top: 0;
  right: 0;
  bottom: 50px;
  padding: 0 10px;
  background: #ffd000;
  height: 70px;

  .position {
    position: relative;
    padding: 16px 24px 40px;
    line-height: 22px;
    font-size: 16px;
    color: $content-fontcolor;
    //引入
    @include ellipse;

    &-back {
      position: absolute;
      left: 20px;
      top: 20px;
      font-size: 20px;
    }

    &-font {
      position: absolute;
      left: 45%;
      top: 22px;
      font-size: 25px;
      font-weight: bold;
    }
  }
}
.body{
  position: absolute;
  top: 80px;
}
</style>
